import 'package:flutter/material.dart';
import 'package:food_hub_app/layout/index.dart';
import 'package:food_hub_app/models/layout.dart';
import 'package:food_hub_app/views/moment.dart';
import 'package:food_hub_app/views/profile.dart';
import 'package:food_hub_app/views/record.dart';
import 'package:food_hub_app/views/stats.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _HomePage();
}

class _HomePage extends State<HomePage> {
  int _currentIndex = 0;

  final List<NavItem> navItems = [
    NavItem(
      label: "记录",
      icon: Icons.home_outlined,
      activeIcon: Icons.home,
      page: RecordPage(),
    ),
    NavItem(
      label: "统计",
      icon: Icons.pie_chart_outline,
      activeIcon: Icons.pie_chart,
      page: StatsPage(),
    ),
    NavItem(
      label: "朋友圈",
      icon: Icons.group_outlined,
      activeIcon: Icons.group,
      page: MomentPage(),
    ),
    NavItem(
      label: "我的",
      icon: Icons.account_circle_outlined,
      activeIcon: Icons.account_circle,
      page: ProfilePage(),
    ),
  ];

  List<BottomNavigationBarItem> get bottomNavItems =>
      navItems
          .map(
            (item) => BottomNavigationBarItem(
              icon: Icon(item.icon),
              activeIcon: Icon(item.activeIcon),
              label: item.label,
            ),
          )
          .toList();

  List<Widget> get tabPages => navItems.map((item) => item.page).toList();

  // 显示底部弹窗
  void _showBottomSheet() {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(16),
        ),
      ),
      builder: (context) => Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              '请选择操作',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 10),
            ListTile(
              leading: Icon(Icons.book, color: Theme.of(context).primaryColor),
              title: const Text('新增菜谱'),
              onTap: () {
                Navigator.pop(context);
                _handleAddRecipe();
              },
            ),
            ListTile(
              leading: Icon(Icons.note_add, color: Theme.of(context).primaryColor),
              title: const Text('新增记录'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, "/recordForm");
              },
            ),
            ListTile(
              leading: Icon(Icons.group, color: Theme.of(context).primaryColor),
              title: const Text('发布朋友圈'),
              onTap: () {
                Navigator.pop(context);
                _handleAddRecord();
              },
            )
          ],
        ),
      ),
    );
  }

  // 处理添加菜谱
  void _handleAddRecipe() {
    // 这里添加跳转或处理添加菜谱的逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('添加菜谱功能')),
    );
  }

  // 处理添加记录
  void _handleAddRecord() {
    // 这里添加跳转或处理添加记录的逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('添加记录功能')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Food Hub', style: TextStyle(color: Colors.white)),
        backgroundColor: Theme.of(context).primaryColor,
        leading: Builder(
          builder: (context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              color: Colors.white,
              onPressed: () => Scaffold.of(context).openDrawer(),
            );
          },
        ),
        actions: homeActions(context),
      ),
      backgroundColor: Color(0xFFF5F5F5),
      drawer: const SettingsDrawer(),
      body: tabPages[_currentIndex],
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        onPressed: _showBottomSheet,
        shape: const CircleBorder(),
        child: const Icon(Icons.add, color: Colors.white, size: 30),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: NavBar(
        navItems: bottomNavItems,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
